<template>
  <div>
    <!-- 饿了吗图像上传组件
    1.action 后台上传的图片接口地址
    2.:show-file-list 是否显示上传完成图片
    3.on-success上传成功的回调
    4.before-upload 上传之前的回调
    5.http-request 自定义上传(自己发请求上传) => 不走action和on-success事件
      :on-success="handleAvatarSuccess"

    -->
    <el-upload
      class="avatar-uploader"
      action="#"
      :show-file-list="false"
      :http-request="uploadSelf"
      :before-upload="beforeAvatarUpload"
    >
      <!-- 显示上传的图片 -->
      <img v-if="src" :src="src" class="avatar" />
      <!-- 默认显示的图标 -->
      <i v-else class="el-icon-plus avatar-uploader-icon" />
      <!-- 进度条组件 -->
      <el-progress
        v-show="showProgress"
        type="line"
        :percentage="percentage"
        class="progress"
      />
    </el-upload>
  </div>
</template>

<script>
// 引入腾讯云sdk(方法合集)包
import Cos from 'cos-js-sdk-v5'
// 初始化cos
const cos = new Cos({
  SecretId: 'AKIDWv5yub2B3ey1nJZYGitnQmvoQlpb6KGv', // 身份识别ID
  SecretKey: 'PXOyGH1UgbFdkbASSBdngIdh8JErDI6d' // 身份秘钥
})
export default {
  name: 'UploadImg',
  props: {
    // 父传子,传过来的默认显示图像
    src: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      // 上传图片的地址 (服务器的地址)
      // imageUrl: '',
      // 进度条初始值
      percentage: 0,
      // 进度条显示控制
      showProgress: false
    }
  },
  methods: {
    // 上传成功后调 => 可以获取后台返回图片地址
    // handleAvatarSuccess (res, file) {
    //   this.imageUrl = URL.createObjectURL(file.raw)
    // },
    // 上传之前的校验 --> 图片的格式和大小
    beforeAvatarUpload (file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    // 自定义上传
    uploadSelf ({ file }) {
      // 开始上传显示进度条
      this.showProgress = true
      console.log(file)
      // 调用cos方法实例
      // putObject 方法参数:1.上传文件的基本参数 2.回调函数(注意:写箭头函数this的指向)=>获取上传成功的图片地址
      cos.putObject({
        Bucket: 'cocoqi-1306504810', /* 必须  存储桶名字 */
        Region: 'ap-beijing', /* 存储桶所在地域，必须字段 */
        Key: 'file.name', /* 必须 唯一的标识*/
        StorageClass: 'STANDARD', // 标准储存
        Body: file, // 上传文件对象
        onProgress: (progressData) => {
          // 获取上传的进度
          console.log(JSON.stringify(progressData))
          // 存储上传进度
          this.percentage = progressData.percent * 100
        }
      }, (err, data) => {
        console.log(err || data)
        // 获取上传成功的图片地址
        console.log(data)
        if (data.statusCode === 200) {
          setTimeout(() => {
            // 上传成功后显示存储到服务器的图片
            // this.src = `https://${data.Location}`
            this.$emit('update:src', `https://${data.Location}`)
            // 关闭进度条
            this.showProgress = false
          }, 800)
        }
      })
    }
  }
}
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
